<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            font-size: 12px;
        }
        ul {
            display: flex;
            width: 1200px;
            margin: auto;
            flex-wrap: wrap;
            line-height: 1.5;
            text-align: center;
        }
        li{
            width: 23%;
            margin: 1%;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        img{
            width: 100%;
        }
        strong{
            color: red;
        }
    </style>
</head>
<body>

    <ul id="list">
        <!-- <li>
            <a href="">
                <img src="https://img10.360buyimg.com/seckillcms/s280x280_jfs/t1/206489/27/15780/147827/61dbf3ceEb8621df7/fc8ab206041fa298.jpg.webp" alt="">
                <h3>搞点啊</h3>
                <p>糕点真好吃啊</p>
                <strong>99</strong>
            </a>
        </li> -->
       
    </ul>

    <script>
        var data = [
            {
                'imgSrc' : 'https://img10.360buyimg.com/seckillcms/s280x280_jfs/t1/206489/27/15780/147827/61dbf3ceEb8621df7/fc8ab206041fa298.jpg.webp' ,
                'title' : '稻香村搞点' ,
                'price' : '99' ,
                'des' : '稻香村搞点真好吃，快来买啊'
            } ,
            {
                'imgSrc' : 'https://img10.360buyimg.com/seckillcms/s280x280_jfs/t1/206489/27/15780/147827/61dbf3ceEb8621df7/fc8ab206041fa298.jpg.webp' ,
                'title' : '稻香村搞点' ,
                'price' : '99' ,
                'des' : '稻香村搞点真好吃，快来买啊'
            } ,
            {
                'imgSrc' : 'https://img10.360buyimg.com/seckillcms/s280x280_jfs/t1/206489/27/15780/147827/61dbf3ceEb8621df7/fc8ab206041fa298.jpg.webp' ,
                'title' : '稻香村搞点' ,
                'price' : '99' ,
                'des' : '稻香村搞点真好吃，快来买啊'
            } ,
            {
                'imgSrc' : 'https://img10.360buyimg.com/seckillcms/s280x280_jfs/t1/206489/27/15780/147827/61dbf3ceEb8621df7/fc8ab206041fa298.jpg.webp' ,
                'title' : '稻香村搞点555' ,
                'price' : '199' ,
                'des' : '稻香村搞点真好吃，快来买啊'
            } ,
            
        ] ;


        // 动态生成列表

        //    1 把生成的内容当做一个字符串  res = '' ;

        //    2 有多少条数据，就有多少个  li   

        //    3 给li添加内容

        //    4 把这个字符串赋值给ul的innerHTML  




        var res = '' ;
        // 遍历数据
        for(var i = 0 ; i < data.length ; i++) {
            // res += '<li><a href="">';
            //     // '<img src="" alt="">'
            // res += '<img src="' + data[i].imgSrc + '" alt="">' ;
            // res += '<h3>' + data[i].title + '</h3>' ;
            // res += '<p>' + data[i].des + '</p>' ;
            // res += '<strong>' + data[i].price + '</strong>' ;
            // res += '</a></li>';

            res += `
                <li>
                    <a href="">
                        <img src="${data[i].imgSrc}" alt="">
                        <h3>${data[i].title}</h3>
                        <p>${data[i].des}</p>
                        <strong>${data[i].price}</strong>
                    </a>
                </li>
            `
        }

        var oUl = document.getElementById('list') ;
        oUl.innerHTML = res ;

    </script>
    
</body>
</html>